{% extends 'layout.html' %}

{% block content %}
    <div class="row">
        <div class="col-md-12">
            <div class="box">
                <div class="box-header with-border">
                    <h3 class="box-title">Salt Key管理</h3>

                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                class="fa fa-chevron-up"></i>
                        </button>
                        <div class="btn-group">
                            <button type="button" class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown">
                                <i class="fa fa-wrench"></i></button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div>
                        <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i>
                        </button>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body">

                    <ul id="myTab" class="nav nav-tabs">
                        <li class="active"><a href="#allow">已允许key列表</a></li>
                        <li><a href="#disallow">未允许key列表</a></li>
                    </ul>

                    <div id="tabcontent" class="tab-content">
                        <div id="allow" class="tab-pane active">
                            <div id="toolbar">
                                <button id="btn_remove" class="btn btn-sm btn-danger">
                                    <i class="glyphicon glyphicon-remove"></i> 删除
                                </button>
                            </div>
                            <table id="table">
                            </table>
                        </div>
                        <div id="disallow" class="tab-pane">
                            <div id="toolbar2">
                                <button id="btn_allow" class="btn btn-sm btn-success">
                                    <i class="glyphicon glyphicon-edit"></i> 允许
                                </button>
                            </div>
                            <table id="table2"></table>
                        </div>

                    </div>
                </div>
                <!-- ./box-body -->
                <div class="box-footer">
                    <div class="row">

                    </div>
                    <!-- /.row -->
                </div>
                <!-- /.box-footer -->
            </div>
            <!-- /.box -->
        </div>
        <!-- /.col -->
    </div>



{% endblock %}
{% block self_footer_js %}
    <script>
        var $table = $('#table'),
            $remove = $('#remove'),
            selections = [];

        var $table2 = $('#table2');

        function initTable() {
            $table.bootstrapTable({
                method: 'get',
                //url: '/deploy/get_key_list/',
                url: "{% url 'get_accepted_key' %}",
                toolbar: '#toolbar',
                idField: 'hostname',
                sidePagination: "client",
                striped: true,
                search: true,
                showRefresh: true,
                showColumns: true,
                showPaginationSwitch: true,
                pagination: true,
                pageSize: 12,
                pageList: [10, 25, 50, 100],
                cache: false,
                clickToSelect: true,
                columns: [
                    {
                        field: 'state',
                        checkbox: true,
                        align: 'center'
                    },
                    {
                        field: 'hostname',
                        title: '主机',
                        sortable: true,
                        align: 'center'
                    }
                    , {
                        field: 'status',
                        title: 'salt状态',
                        align: 'center',
                        formatter: statusFormatter
                    }
                    , {
                        field: 'email',
                        title: '持续时间',
                        align: 'center'
                    }

                ]
            })
        }


        var $table2 = $('#table2');

        function initTable2() {
            $table2.bootstrapTable({
                method: 'get',
                url: "{% url 'get_unaccepted_key' %}",
                toolbar: '#toolbar2',
                idField: 'hostname',
                sidePagination: "client",
                striped: true,
                search: true,
                showRefresh: true,
                showPaginationSwitch: true,
                pagination: true,
                pageSize: 12,
                cache: false,
                clickToSelect: true,
                columns: [
                    {
                        field: 'state',
                        checkbox: true,
                        align: 'center'
                    },
                    {
                        field: 'hostname',
                        title: '主机',
                        sortable: true,
                        align: 'center'
                    }
                    , {
                        field: 'action',
                        title: '操作',
                        align: 'center'
                    }

                ]
            })
        }

        function getHeight() {
            return $(window).height() - $('h1').outerHeight(true);
        }

        function statusFormatter(value, row, index) {
            return [
                '<i class="glyphicon glyphicon-ok"></i>',
            ].join('');
        }

        $(function () {

            $('#myTab a').click(function (e) {
                e.preventDefault()
                $(this).tab('show')
            });

            //初始化表格
            initTable();
            initTable2();

            // delete button
            $("#btn_remove").click(function () {
                var selected = $table.bootstrapTable('getSelections');
                if ($(selected).length > 0) {
                    BootstrapDialog.confirm({
                        title: '警告',
                        message: "确定删除选中的" + $(selected).length + "个key吗?",
                        type: BootstrapDialog.TYPE_WARNING,
                        btnCancelLabel: '放弃',
                        btnCancelClass: 'btn-white',
                        btnOKLabel: '确认',
                        callback: function (result) {
                            if (result) {
                                var nodes = new Array($(selected).length);
                                $.each(selected, function (index, value) {
                                    nodes[index] = value.hostname;
                                });
                                //$.post("/deploy/delete_key/", {node_list: nodes}, function (data) {
                                $.post("{% url 'delete_key' %}", {node_list: nodes}, function (data) {
                                        if (data.Code != 0) {
                                            BootstrapDialog.show({
                                                message: data.Message,
                                                buttons: [{
                                                    icon: "glyphicon glyphicon-ok",
                                                    label: "确定",
                                                    action: function (dialogItself) {
                                                        $table.bootstrapTable("refresh");
                                                        //window.parent.location.reload();
                                                        dialogItself.close();
                                                    }
                                                }]

                                            });
                                        }
                                        else BootstrapDialog.alert(data.Message);

                                    }, "json"
                                );
                            }
                        }
                    });
                }
                else BootstrapDialog.warning("请选择要删除的行");
            });


            //allow btn
            $("#btn_allow").click(function () {
                var selected = $table2.bootstrapTable('getSelections');
                if ($(selected).length > 0) {
                    BootstrapDialog.confirm({
                        message: "确定允许选中的" + $(selected).length + "个key吗?",
                        callback: function (result) {
                            if (result) {
                                var nodes = new Array($(selected).length);
                                $.each(selected, function (index, value) {
                                    nodes[index] = value.hostname;
                                });
                                //$.post("/deploy/accept_key/", {node_list: nodes}, function (data) {
                                $.post("{% url 'accept_key' %}", {node_list: nodes}, function (data) {
                                        if (data.Code != 0) {
                                            BootstrapDialog.show({
                                                message: data.Message,
                                                buttons: [{
                                                    icon: "glyphicon glyphicon-ok",
                                                    label: "确定",
                                                    action: function (dialogItself) {
                                                        $table.bootstrapTable("refresh");
                                                        //window.parent.location.reload();
                                                        dialogItself.close();
                                                    }
                                                }]

                                            });
                                        }
                                        else BootstrapDialog.alert(data.Message);

                                    }, "json"
                                );
                            }
                        }
                    });
                }
                else BootstrapDialog.warning("请选择要操作的行");
            });
        });
    </script>
{% endblock %}